<template>
	<z-paging  ref="paging" v-model="shopList" @query="queryList">
		<u-sticky>
			<headsty :mrbot="'25'" searchStatus @transmit="getkeyword" :leftImg="'https://morgan.dingxians.cn/static/shop/4.png'"></headsty>
		</u-sticky>

		<view class="lunbo_box" style="background-image: url('https://morgan.dingxians.cn/static/homes/1.png');">
			<u-swiper radius="0" height="157" circular :list="swiperList" @click="swiperClick"></u-swiper>
		</view>
		<view class="anniu_boxxs">
			<view class="dange_anniu_sm_box" v-for="(item, index) in anniuList" :key="index">
				<image :src="item.image" mode="scaleToFill" v-if="selimageId != item.id" @click="selclick(item)" />
				<image :src="item.sel_image" mode="scaleToFill" v-else />
			</view>

		</view>
		<view class="shangpintuijian_box">
			<view class="left_tuijianpic_biox">
				<image src="https://morgan.dingxians.cn/static/homes/8.png" mode="heightFix" />
			</view>
			<view class="chakangengduo_box">
				<view class="dange_yexy_vbox" v-for="(item, index) in xuanzeList" :key="index" @click="selTextId(item)">
					{{ item.text }}
					<view v-if="shaixuanId == item.id" class="line_box"></view>
				</view>
			</view>
		</view>

		<view class="content_box" v-if="selimageId == 1">
			<view class="dange_box" v-for="(item, index) in shopList" :key="index" @click="godetail(item)">
				<view class="top_pic" style="background-image: url('https://morgan.dingxians.cn/static/homes/9.png');">
					<image :src="item.image" mode="scaleToFill" />
				</view>
				<view class="name_box">{{ item.title }}</view>
				<view class="price_box">{{ item.price }}元素</view>
			</view>
			<view v-for="i in 1" style="width: 316rpx;"></view>
		</view>
		<view class="content_box" v-if="selimageId ==2">
			<view class="dange_box" v-for="(item, index) in shopList" :key="index" @click="gojinjiedetail(item)">
				<view class="top_pic" style="background-image: url('https://morgan.dingxians.cn/static/homes/9.png');">
					<image :src="item.goods_image" mode="scaleToFill" />
				</view>
				<view class="name_box">{{ item.goods_name }}</view>
				<view class="price_box">{{ item.price }}元素</view>
			</view>
			<view v-for="i in 1" style="width: 316rpx;"></view>
		</view>
	</z-paging>
</template>
<script>
import headsty from '../../components/indexhead.vue'
export default {
	components: {
		headsty
	},
	data() {
		return {
			keyword: '',
			swiperList: [
				'https://morgan.dingxians.cn/upload/20241017/6711017676d0f.png'
			],
			anniuList: [
				{
					id: 1,
					image: 'https://morgan.dingxians.cn/static/shop/1.png',
					sel_image: 'https://morgan.dingxians.cn/static/shop/01.png',
				},
				{
					id: 2,
					image: 'https://morgan.dingxians.cn/static/shop/2.png',
					sel_image: 'https://morgan.dingxians.cn/static/shop/02.png',
				},
				{
					id: 3,
					image: 'https://morgan.dingxians.cn/static/shop/3.png',
					sel_image: 'https://morgan.dingxians.cn/static/shop/03.png',
				},
			],
			selimageId: 1,
			xuanzeList: [
				{
					id: 1,
					text: '综合'
				},
				{
					id: 2,
					text: '销量'
				},
				{
					id: 3,
					text: '价格'
				}
			],
			shaixuanId: 1,
			shopList:[],
		}
	},
	methods: {
		getkeyword(e) {
			this.keyword = e
			console.log(this.keyword)
		},
		swiperBtn(e) {
			console.log("123")
		},
		submit(item) {
			console.log(item)
		},
		selclick(item) {
			if(item.id == 3){
				this.$msg('敬请期待...')
			}else if(item.id == 2){
				// this.selimageId = item.id
				// this.getData()
				this.$router('/shopPage/move')
			}else{
				this.selimageId = item.id
				this.$refs.paging.reload()
			}
            
		},
		selTextId(item) {
			this.shaixuanId = item.id
			this.$refs.paging.reload()
		},
		swiperClick(e) {
			console.log(e)
		},
		godetail(item) {
			this.$router('/shopPage/detail?id=' + item.id)
		},
		gojinjiedetail(item) {
			this.$router('/shopPage/jinjie?item=' + JSON.stringify(item) + '&lzshop=' + true)
		},
		queryList(pageNo, pageSize) {
			let data = {
				goods_cate_id: this.selimageId,
				title: this.keyword,
				page: pageNo,
				limit: pageSize
			}
			this.$Request.get(this.$api.shop.goods, data).then(res => {
				if (res.code == 200) {
					this.$refs.paging.complete(res.data.data)
				}
			})
			 
		},
		getData() {
            this.$Request.get(this.$api.bonus.fusionPrizes).then(res => {
                if (res.code == 200) {
                    this.shopList = res.data.data
                }
            })
        },
	}
}
</script>
<style lang="scss" scoped>
/deep/.u-swiper {
	background: rgba(255, 255, 255, 0) !important;
}

.lunbo_box {
	width: 100%;
	height: 319rpx;
	background-size: 100% 100%;
	margin-bottom: 27rpx;
}

.anniu_boxxs {
	width: 100%;
	height: 125rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	margin-bottom: 50rpx;

	.dange_anniu_sm_box {
		width: 210rpx;
		height: 125rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.shangpintuijian_box {
	width: 100%;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
	box-sizing: border-box;

	.left_tuijianpic_biox {
		height: 42rpx;

		image {
			height: 100%;
		}
	}

	.chakangengduo_box {
		height: 42rpx;
		display: flex;
		justify-content: flex-end;
		box-sizing: border-box;

		.dange_yexy_vbox {
			width: 60rpx;
			height: 42rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 27rpx;
			text-align: center;
			margin-right: 35rpx;
			position: relative;

			.line_box {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 40rpx;
				height: 4rpx;
				background: #FF4444;
				border-radius: 2rpx;
			}
		}
	}
}

.content_box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 30rpx;
	flex-wrap: wrap;

	.dange_box {
		width: 316rpx;
		height: 530rpx;
		margin-bottom: 27rpx;

		.top_pic {
			width: 310rpx;
			height: 300rpx;
			margin-bottom: 20rpx;
			background-size: 100% 100%;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.name_box {
			width: 100%;
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 23rpx;
			margin-bottom: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.price_box {
			width: 100%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 23rpx;
		}
	}
}
</style>